{%extends "base.html"%}
{%load plotly_dash%}

{%block post_body%}{%plotly_message_pipe%}{%endblock%}

{%block title%}Demo Four - Live Updating{%endblock%}

{%block content%}
<h1>Live Updating</h1>
<p>
  Live updating uses a websocket connection. The server pushes messages to the UI, and this is then translated into a
  callback through a dash component.
</p>
<p>
Each press of a button causes a new random value to be added to that colour's time series in each
chart. Separate values are generated for each chart. The top chart has values
local to this page, and the bottom chart - including its values - is shared across all views of this
page.
</p>
<p>
Reloading this page, or viewing in a second browser window, will show a new and initially empty
top chart and a copy of the bottom chart. Pressing any button in any window will cause all instances
of the bottom chart to update with the same values. Note that button presses are throttled so that
only one press per colour per second is processed.
</p>
<div class="card bg-light border-dark">
  <div class="card-body">
    <p><span>{</span>% load plotly_dash %}</p>
    <p><span>{</span>% plotly_message_pipe %}</p>
    <p><span>{</span>% plotly_app name="LiveInput" %}</p>
    <p><span>{</span>% plotly_app name="LiveOutput" %}</p>
    <p><span>{</span>% plotly_app slug="liveoutput-2" %}</p>
  </div>
</div>
<p>
</p>
<div class="card border-dark">
  <div class="card-body">
    {%plotly_app name="LiveInput"%}
  </div>
</div>
<p>
</p>
<div class="card border-dark">
  <div class="card-body">
    {%plotly_app name="LiveOutput" ratio=0.5 %}
  </div>
</div>
<p>
</p>
<div class="card border-dark">
  <div class="card-body">
    {%plotly_app slug="liveoutput-2" ratio=0.5 %}
  </div>
</div>
<p>
</p>
<p>
  Any http command
  can be used to send a message to the apps. This is equivalent to a press of
  the red button. Other colours can be specified, including yellow, cyan and black in
  addition to the three named in the LiveInput app.
</p>
<div class="card bg-light border-dark">
  <div class="card-body">
    curl http://{%site_root_url%}/dpd/views/poke/ -d'{"channel_name":"live_button_counter","label":"named_counts","value":{"click_colour":"red"}}'
  </div>
</div>
<p></p>
{%endblock%}
